<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      v-loading="loading"
      reqUrl="web/live_room/cameraList"
      :column="classesColumn"
      :filterProps="{ showBtns: false, fields: [] }"
      :queryPropsParams="{areaId: curArea.areaId}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large"  @click="addHandle({}, 'add')" round) 新增
      template(slot="active" slot-scope="text, scope")
        el-tag(:type="text ? 'success' : 'danger'" size="mini" class="mr5" effect="plain") {{text ? '是' : '否'}}
      template(slot="ipOnline" slot-scope="text") {{text ? '是' : ''}}
      template(slot="action" slot-scope="text, scope")
        template
          el-link(@click="addHandle(scope, 'view')" type="primary") 查看
          el-link( @click="addHandle(scope, 'edit')" type="success") 修改
          el-popconfirm(
          title="您确认删除这个摄像头吗?"
          @confirm="() => addHandle(scope, 'delete')"
          @onConfirm="() => addHandle(scope, 'delete')"
          )
            el-link(slot="reference" type="danger") 删除

    add-drawer(:visible.sync="addVisible" :id="id" @getList="() => refreshTable(true)")
    el-dialog(
      :title="chosedCamera.name"
      append-to-body
      center
      destroy-on-close
      :visible="cameraVisible"
      @close="dialogClose"
    )
      .video
        i-video(ref="singleVideo" :url="chosedCamera.url")
      p.tr.mt12
        el-button(size="small" type="primary" @click="dialogClose") 关闭
</template>
<script>
import { mapGetters } from 'vuex'
import { column } from './config'
import AddDrawer from './components/addDrawer'
import { getStatus, setStatus, deleteCamera, openCamera, updateCamera } from './api'
import IVideo from '@/components/Business/Video'
let cameraInterval
export default {
  components: {
    AddDrawer,
    IVideo
  },
  data () {
    return {
      enable: false, // 是否开通给家长
      classesColumn: column,
      chosedCamera: {},

      id: '',
      addType: '',
      addVisible: false,

      cameraVisible: false,

      loading: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
      ]
    }
  },
  created () {
    this.getData()
  },
  destroyed () {
    window.clearInterval(cameraInterval)
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    async getData () {
      this.loading = true
      const status = await getStatus()
      this.enable = status === 'true'
      this.loading = false
    },
    enableChange (val) {
      setStatus({ enabled: val }).then(() => {
        this.$message.success('设置成功')
      })
    },
    addHandle (row, type) {
      if (type === 'view') {
        this.chosedCamera = row
        this.openCamera(row.id)
        return
      }
      if (type === 'delete') {
        this.deleteHandle(row.id)
        return
      }
      this.id = row.id
      this.addType = type
      this.addVisible = true
    },

    deleteHandle (id) {
      const params = {
        liveRoomId: id
      }
      deleteCamera(params).then(res => {
        console.log(res)
        this.refreshTable()
      })
    },

    dialogClose () {
      this.$refs.singleVideo.stopPlay()
      this.chosedCamera = {}
      this.cameraVisible = false
      window.clearInterval(cameraInterval)
    },

    openCamera (liveRoomId) {
      this.loading = true
      openCamera({ liveRoomId }).then(res => {
        console.log(res)
        if (parseInt(res) === 1) {
          this.cameraVisible = true
          this.loading = false
        } else {
          setTimeout(() => {
            this.cameraVisible = true
            this.loading = false
            this.setInterval(liveRoomId)
          }, 1000 * 15)
        }
      }).catch(errr => {
        this.loading = false
      })
    },
    setInterval (liveRoomId) {
      cameraInterval = setInterval(() => {
        updateCamera({ liveRoomId })
      }, 1000 * 60 * 5)
    }
  }
}
</script>
<style lang="scss" scoped>
.video{
  width: 100%;
  height: 560px
}
.close{
  margin-top: 20px;
}
</style>
